<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>虚拟DOM的两种创建方式</title>

  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <div id="test1"></div>
  <div id="test2"></div>


    <!--引入react  核心库-->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
 

  <!-- 使用js 语法创建虚拟DOM -->
  <script type="text/javascript">
     let myID = 'aTGuigu'  //定义id
     let myData = 'heLLo react'  // 定义数据
     
     // 1.创建虚拟DOM 使用JS 语法
     let vDOM1 = React.createElement('h2',{id:myID.toLocaleLowerCase()},React.createElement('span',{},myData.toLocaleLowerCase()))     // 创建的是h2 标签
     console.log(typeof vDOM1);  // 检测出虚拟DOM 到底是什么  就是一个对象
     // 2. 渲染虚拟DOM 到页面
     ReactDOM.render(vDOM1,document.getElementById('test1'))
  </script>

  <!-- 使用JSX 语法创建虚拟DOM -->
  <script type="text/babel">
    // 1.使用jsx 语法创建虚拟DOM
    let vDOM2  = (
      <div>
        <h3 id = {myID.toUpperCase()}> 
        <span  className = "red">
        {myData.toUpperCase()}
        </span>
        </h3>  
        <h1>haluo</h1>
      </div>
      )
    // 2. 渲染虚拟DOM 到页面
    ReactDOM.render(vDOM2,document.getElementById('test2'))
  </script>


  <!--虚拟DOM  与真实DOM 的区别
      虚拟DOM：较轻，就是一个js的对象。  虚拟DOM中不需要过多的API
      真实DOM：较重，实实在在页面中显示的DOM
  -->

</body>
</html>
